<template>
  <el-card class="box-card" style="height: 100%">
    <div slot="header" class="clearfix">
      <span>销售分析</span>
    </div>
    <el-card class="table-card">
      <div class="searchAdd">
        <el-col :span="15" style="width: 400px">
          <el-date-picker
            v-model="Page.stringTime"
            type="date"
            placeholder="选择日期"
            format="yyyy年M月d日"
            value-format="yyyy/M/d"
            @change="searchByTime()"
            :editable="false"
          >
          </el-date-picker>
        </el-col>
      </div>
      <div class="InfoTable">
        <el-table
          :data="tableData"
          v-loading="loading"
          style="width: 100%"
          max-height="400px"
          stripe
        >
          <el-table-column fixed prop="id" label="ID" width="50">
          </el-table-column>
          <el-table-column prop="sales" label="销售金额(单位:万元)" width="150">
          </el-table-column>
          <el-table-column prop="month" label="月份" >
          </el-table-column>
          <el-table-column prop="dept" label="部门" >
          </el-table-column>
          <el-table-column prop="tongbi" label="同比">
          </el-table-column>

          <el-table-column prop="huanbi" label="环比" >
          </el-table-column>
        </el-table>
        <el-pagination
          :page-size="Page.size"
          :pager-count="7"
          :current-page="Page.current"
          layout="prev, pager, next"
          :page-count="Page.pageCount"
          @current-change="handleCurrentChange"
          ref="pageCurrent"
        >
        </el-pagination>
      </div>
    </el-card>
    <div class="cartogram">
      <div class="cartogramShow"></div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "analysis",
  data() {
    return {
      // 加载状态
      loading: "",
      // 页面
      Page: {
        stringTime: null,
        current: 1,
        size: 6,
        pageCount: 1,
      },
      // 表格数据
      tableData: [],
      cartogramDate: [
        {
          id: "item0",
          text: "市场发展部",
          num: 210,
          color: "#1e90ff",
          isdraw: 1,
        },
        {
          id: "item1",
          text: "计划营销部",
          num: 123,
          color: "#36cbcb",
          isdraw: 1,
        },
        {
          id: "item2",
          text: "综合统计部",
          num: 85,
          color: "#2fc25b",
          isdraw: 1,
        },
        {
          id: "item3",
          text: "财务计发部门",
          num: 89,
          color: "#ffd700",
          isdraw: 1,
        },
        {
          id: "item4",
          text: "总经办",
          num: 77,
          color: "#ff3030",
          isdraw: 1,
        },
      ],
    };
  },
  mounted() {
    this.getCompetitionData();
    var apie = new pieChart("销售分析", this.cartogramDate, 100, 30);
    apie.add_data();
    apie.draw();

    function pieChart(title, data, radius, width) {
      this.title = title;
      this.data = data;
      this.width = width;
      this.radius = radius;

      this.add_data = function () {
        var width = 2 * radius;
        var chart = document.createElement("div");
        chart.style.width = width + "px";
        var top = document.createElement("div");
        top.setAttribute(
          "style",
          "text-align:center;margin-top:40px;font-weight:bold;width:" +
            width +
            "px"
        );
        top.innerText = title;
        var circle = document.createElement("canvas");
        circle.setAttribute("id", "circle");
        circle.setAttribute("width", width + "px");
        circle.setAttribute("height", width + "px");
        var list = document.createElement("div");
        list.setAttribute("id", "list");
        var ul = document.createElement("ul");
        ul.setAttribute(
          "style",
          "font-family:Simsun;margin:0;padding:0;list-style:none;"
        );
        for (var i = 0; i < data.length; i++) {
          var li = document.createElement("li");
          li.setAttribute("id", data[i].id);
          li.setAttribute("style", "width:" + width + "px;");
          li.style.color = data[i].color;
          li.innerHTML =
            "<span>• </span><span style='color:black;'>" +
            data[i].text +
            "</span><span style='color:gray;margin-left:20px'>" +
            data[i].num +
            "</span>";
          li.onclick = this.draw;
          ul.appendChild(li);
        }
        list.appendChild(ul);
        chart.appendChild(top);
        chart.appendChild(circle);
        chart.appendChild(list);
        document.querySelector(".cartogramShow").appendChild(chart);
      };
      this.draw = function () {
        var len = data.length;
        var id = this.id;
        for (var i = 0; i < len; i++) {
          if (data[i].id == id) {
            data[i].isdraw = data[i].isdraw ? 0 : 1;
            this.style.color =
              this.style.color == "gray" ? data[i].color : "gray";
            var span = this.children[2];
            span.style.display =
              span.style.display == "none" ? "inline" : "none";
          }
        }
        var canvas = document.getElementById("circle");
        canvas.height = canvas.height;
        if (canvas.getContext) {
          var ctx = canvas.getContext("2d");
          var PI = Math.PI;
          var start = PI * 1.5;
          var gap = 0.01;
          var pros;
          var sum = 0;
          var zero = 0;
          for (var i = 0; i < len; i++) {
            if (data[i].isdraw == 0) {
              zero++;
              continue;
            }
            sum += data[i].num;
          }
          if (zero < len - 1) {
            pros = 100 - len + zero;
          } else {
            pros = 100;
          }
          ctx.strokeStyle = "white";
          for (var i = 0; i < len; i++) {
            var num = data[i].num;
            if (data[i].isdraw == 0) {
              continue;
            }
            var a_color = data[i].color;
            var end = start + (((2 * PI * pros) / 100) * num) / sum;
            ctx.beginPath();
            ctx.moveTo(radius, radius);
            ctx.arc(radius, radius, radius, start, end, false);
            ctx.stroke();
            start = end + 2 * PI * gap;
            ctx.fillStyle = a_color;
            ctx.fill();
          }
          ctx.beginPath();
          ctx.arc(radius, radius, radius - width, 0, PI * 2, false);
          ctx.stroke();
          ctx.fillStyle = "white";
          ctx.fill();
          ctx.fillStyle = "black";
          ctx.font = radius / 5 + "px Simsun";
          ctx.fillText(
            "总计",
            (canvas.width - ctx.measureText("总计").width) / 2,
            canvas.height / 2 - radius / 10
          );
          ctx.fillText(
            sum,
            (canvas.width - ctx.measureText(sum).width) / 2,
            canvas.height / 2 + radius / 10
          );
        }
      };
    }
  },
  methods: {
    // 通过时间查找
    searchByTime() {
      this.getCompetitionData();
    }, // 获取表格数据
    async getCompetitionData() {
      this.loading = true;
      if (this.Page.stringTime == null) {
        const { data: res } = await this.$http.post("/analysis/getall", {
          current: this.Page.current,
          size: this.Page.size,
        });
        if (res.status != 200) {
          this.loading = false;
          return this.$message.error(res.msg);
        }
        this.tableData = res.data.content;
        this.Page.pageCount = res.data.pageCount;
        this.loading = false;
      } else {
        const { data: res } = await this.$http.post("/analysis/getbymonth", {
          current: this.Page.current,
          size: this.Page.size,
          month: this.Page.stringTime,
        });
        if (res.status != 200) {
          this.loading = false;
          this.Page.stringTime = null;
          return this.$message.error(res.msg);
        }
        this.tableData = res.data.content;
        this.Page.pageCount = res.data.pageCount;
        this.loading = false;
      }
    },
    // 页面改变
    handleCurrentChange(currentPage) {
      this.Page.current = currentPage;
      this.getCompetitionData();
    },
  },
};
</script>

<style scoped>
.table-card {
  float: left;
  width: 50%;
}
.cartogram {
  float: right;
  margin-right: 1%;
  width: 45%;
  background-color: rgba(205, 205, 205, 0.586);
  border-radius: 10%;
  height: 475px;
}
.clearfix {
  padding: 0 50px;
}
</style>
